<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:thSys="">
<!-- 顶部栏 -->
<head>
	<title>日记管理</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="shortcut icon" th:href="@{/img/favicon.ico}"/>
	<link rel="stylesheet" type="text/css" th:href="@{/plugins/bootstrap/css/bootstrap.min.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/plugins/vali/css/main.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/plugins/font-awesome-4.7.0/css/font-awesome.min.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/plugins/toast/jquery.toast.css}">
	<link rel="stylesheet" th:href="@{/plugins/simplemde/simplemde.min.css}">
	<link rel="stylesheet" th:href="@{//cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css}">
	<link rel="stylesheet" th:href="@{/plugins/bootstrap-fileinput/css/fileinput.min.css}">
	<link rel="stylesheet" th:href="@{/css/attachment.css}">
</head>
<body class="app sidebar-mini rtl">
	<main class="app-content">
		<header class="app-header"><a class="app-header__logo" href="/admin">Mayday</a>
			<a class="app-sidebar__toggle" href="#" data-toggle="sidebar" aria-label="Hide Sidebar"></a>
			<ul class="app-nav">
				<a class="app-nav__item" href="/user/index" th:target="_blank"  aria-label="Show notifications"><i class="fa fa-paper-plane fa-lg"></i></a>
				<li class="dropdown"><a class="app-nav__item" href="#" data-toggle="dropdown" aria-label="Open Profile Menu"><i class="fa fa-user fa-lg"></i></a>
					<ul class="dropdown-menu settings-menu dropdown-menu-right">
						<li><a class="dropdown-item" href="/admin/profile"><i class="fa fa-user fa-lg"></i> 个人资料</a></li>
						<li><a class="dropdown-item" href="/user/logout"><i class="fa fa-sign-out fa-lg"></i> 退出</a></li>
					</ul>
				</li>
			</ul>
		</header>
		<div>
			<!-- Navbar-->
			<!-- 侧边栏-->
			<div class="app-sidebar__overlay" data-toggle="sidebar"></div>
			<aside class="app-sidebar">
				<div class="app-sidebar__user"><img width="60px" class="app-sidebar__user-avatar" th:src="${user.getIcon()}" alt="User Image">
					<div>
						<p class="app-sidebar__user-name" th:text="${user.getRealname()}" ></p>
					</div>
				</div>
				<ul class="app-menu">
					<li><a class="app-menu__item" href="/admin"><i class="app-menu__icon fa fa-dashboard"></i><span class="app-menu__label">仪表盘</span></a></li>
					<li class="treeview"><a class="app-menu__item" href="#" data-toggle="treeview"><i class="app-menu__icon fa fa-book"></i><span class="app-menu__label">日记</span><i class="treeview-indicator fa fa-angle-right"></i></a>
						<ul class="treeview-menu">
							<li><a class="treeview-item" href="/admin/article"><i class="icon fa fa-circle-o"></i>所有日记</a></li>
							<li><a class="treeview-item" href="/admin/article/new"><i class="icon fa fa-circle-o"></i>写日记</a></li>
						</ul>
					</li>
					<li class="treeview"><a class="app-menu__item" href="#" data-toggle="treeview"><i class="app-menu__icon fa fa-file-text-o"></i><span class="app-menu__label">页面</span><i class="treeview-indicator fa fa-angle-right"></i></a>
						<ul class="treeview-menu">
							<li><a class="treeview-item" href="/admin/page"><i class="icon fa fa-circle-o"></i>所有页面</a></li>
							<li><a class="treeview-item" href="/admin/page/new"><i class="icon fa fa-circle-o"></i>新建页面</a></li>
						</ul>
					</li>
					<li><a class="app-menu__item" href="/admin/attachment"><i class="app-menu__icon fa fa-file-image-o"></i><span class="app-menu__label">附件</span></a></li>
					<!--         <li><a class="app-menu__item" href="charts.html"><i class="app-menu__icon fa fa-comments"></i><span class="app-menu__label">评论</span></a></li> -->
					<li class="treeview"><a class="app-menu__item" href="#" data-toggle="treeview"><i class="app-menu__icon fa fa-paint-brush"></i><span class="app-menu__label">外观</span><i class="treeview-indicator fa fa-angle-right"></i></a>
						<ul class="treeview-menu">
							<li><a class="treeview-item" href="/admin/menus"><i class="icon fa fa-circle-o"></i>菜单</a></li>
						</ul>
					</li>
					<li class="treeview"><a class="app-menu__item" href="#" data-toggle="treeview"><i class="app-menu__icon fa fa-user-circle"></i><span class="app-menu__label">用户</span><i class="treeview-indicator fa fa-angle-right"></i></a>
						<ul class="treeview-menu">
							<li><a class="treeview-item" href="/admin/profile"><i class="icon fa fa-circle-o"></i>个人资料</a></li>
						</ul>
					</li>
				</ul>
			</aside>
		</div>
	<div class="app-title">
		<div>
			<h1>
				<i class="fa fa-book"></i>日记管理
			</h1>
		</div>
		<ul class="app-breadcrumb breadcrumb">
			<li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
			<li class="breadcrumb-item"><a href="/admin/article">日记管理</a></li>
			<li class="breadcrumb-item">所有日记</li>
		</ul>
	</div>
	<!--<div class="row">
		<div class="col-md-12">
			<div class="tile">
				<div class="table-responsive">
					 <div>
						<form class="form-inline" role="form">
							<div class="form-group col-md-2 col-*">
								<label class="form-label ">标题：</label> <input type="text"
									class="form-control">
							</div>
							<div class="form-group col-md-2 col-*">
								<label class="form-label ">分类：</label> <select
									class="form-control">
									<option>请选择</option>
									<option>是啊实打实asdsadsa大</option>
									<option>否</option>
								</select>
							</div>
							<div class="form-group col-md-3 col-*">
								<label class="form-label ">状态：</label> <select
									class="form-control">
									<option>请选择</option>
									<option>原创</option>
									<option>转载</option>
								</select>
								<div class="col-md-1 col-*">
									<button class="btn btn-outline-info" type="submit">查询</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div> -->
	<div class="row">
		<div class="col-md-12">
			<div class="tile">
				<input type="hidden" id="articleId"> <a
					href="/admin/article" th:style="${articleStatus==0} ? 'color: #000' : ''"><span>已发布(<th:block
							th:text="${published}"></th:block>)
				</span></a>&nbsp;|&nbsp;&nbsp;<a href="/admin/article?state=1"
					th:style="${articleStatus==1} ? 'color: #000': ''"><span>草稿(<th:block
							th:text="${draft}"></th:block>)
				</span></a>&nbsp;|&nbsp;&nbsp;<a href="/admin/article?state=2"
					th:style="${articleStatus==2} ? 'color: #000': ''"><span>回收站(<th:block
							th:text="${recycle}"></th:block>)
				</span></a>
				<div class="table-responsive">
					<table class="table table-striped table-bordered table-hover"
						id="article_table">
						<tr>
							<td>日记标题</td>
							<td>所在分类</td>
							<td>标签</td>
							<td>创建时间</td>
							<td>操作</td>
						</tr>
						<tr th:each="article,iterStat : ${articles}">
							<td th:text="${#strings.abbreviate(article.getTitle(),20)}" class="mt-auto"></td>
							<td th:text="${#strings.abbreviate(null,20)}"></td>
							<td th:text="${#strings.abbreviate(null,20)}"></td>
							<td
								th:text="${#dates.format(article.getNewstime(),'yyyy/MM/dd HH:mm:ss')}"></td>
							<td th:switch="${article.getStatus()}"><th:block
									th:case="0">
									<a th:href="@{'/user/post/'+${article.getUrl()}}"
										th:target="_blank" class="btn btn-outline-primary btn-sm">查看</a>
									<a th:href="@{/admin/article/edit(article_id=${article.id})}"
										class="btn btn-outline-info btn-sm">编辑</a>
									<button
										th:onclick="'javascript:recycleModel('+${article.id}+')'"
										class="btn btn-outline-danger btn-sm">丢弃</button>
								</th:block> <th:block th:case="1">
									<a th:href="@{/admin/article/edit(article_id=${article.id})}"
										class="btn btn-outline-primary btn-sm">编辑</a>
									<button th:onclick="'javascript:restore('+${article.id}+')'"
										class="btn btn-outline-info btn-sm">发布</button>
									<button
										th:onclick="'javascript:recycleModel('+${article.id}+')'"
										class="btn btn-outline-danger btn-sm">丢弃</button>
								</th:block> <th:block th:case="2">
									<button th:onclick="'javascript:restore('+${article.id}+')'"
										class="btn btn-outline-primary btn-sm">还原</button>
									<button th:onclick="'javascript:showModel('+${article.id}+')'"
										class="btn btn-outline-danger btn-sm">彻底删除(不可逆)</button>
								</th:block></td>
						</tr>
						<tr th:unless="${articles.size()} != 0">
							<td th:text="暂无日记" th:attr="colspan='7',align='center'"></td>
						</tr>
					</table>
				</div>
				<div class="clearfix">
					<ul class="pagination no-margin float-right">
						<li th:if="${pageInfo.pages}!=0" class="page-item"><a class="page-link" href="#" th:text="'共'+ ${pageInfo.pages}+'页'"></a></li>
						<li th:if="${pageInfo.hasPreviousPage}" class="page-item"><a
								th:href="@{'?page='+${pageInfo.prePage}+'&state='+${articleStatus}}" class="page-link"> <i
								class="fa fa-angle-left"></i>&nbsp;上一页
						</a></li>
						<th:block th:each="nav : ${pageInfo.navigatepageNums}">
							<li
									th:class="${nav==pageInfo.pageNum} ? 'page-item active':'page-item'"><a
									class="page-link" th:href="@{'?page='+${nav}+'&state='+${articleStatus}}" th:text="${nav}"></a>
							</li>
						</th:block>
						<th:block th:if="${pageInfo.hasNextPage}">
							<li class="page-item"><a
									th:href="@{'?page='+${pageInfo.nextPage}+'&state='+${articleStatus}}" class="page-link">
								下一页&nbsp;<i class="fa fa-angle-right"></i>
							</a></li>
						</th:block>
					</ul>
				</div>
			</div>
		</div>
	</div>
	</main>
	<div class="modal fade" id="removeModal">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title">提示信息</h4>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>
				<div class="modal-body">您确定要删除吗？(不可逆)</div>
				<!-- 模态框底部 -->
				<div class="modal-footer">
					<button type="button" class="btn btn-outline-secondary"
							data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-outline-primary" onclick="remove()">确定</button>
				</div>

			</div>
		</div>
	</div>
	<div th:fragment="recycle" class="modal fade" id="recycleModal">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title">提示信息</h4>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>
				<div class="modal-body">您确定要放入回收站吗？</div>
				<!-- 模态框底部 -->
				<div class="modal-footer">
					<input type="hidden" id="tagid" />
					<button type="button" class="btn btn-outline-secondary"
							data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-outline-primary" onclick="recycle()">确定</button>
				</div>

			</div>
		</div>
	</div>
	<script type="text/javascript" th:src="@{/plugins/vali/js/jquery-3.2.1.min.js}"></script>
	<script type="text/javascript" th:src="@{/plugins/vali/js/popper.min.js}"></script>
	<script type="text/javascript" th:src="@{/plugins/vali/js/bootstrap.min.js}"></script>
	<script type="text/javascript" th:src="@{/plugins/vali/js/main.js}"></script>
	<script type="text/javascript" th:src="@{/plugins/vali/js/plugins/pace.min.js}"></script>
	<script type="text/javascript" th:src="@{/js/mayday.js}"></script>
	<script type="text/javascript" th:src="@{/plugins/toast/jquery.toast.js}"></script>
	<script type="text/javascript">
		function recycleModel(id) {
			$("#articleId").val(id);
			$("#recycleModal").modal();
		}
		function recycle() {
			window.location.href = "/admin/article/recycle?id="
					+ $("#articleId").val();
		}
		function showModel(id) {
			$("#articleId").val(id);
			$("#removeModal").modal();
		}
		function remove() {
			window.location.href = "/admin/article/remove?id="
					+ $("#articleId").val();
		}
		function restore(id) {
			$.ajax({
				url : "/admin/article/restore",
				type : "post",
				data : {
					id : id
				},
				dataType : "json",
				success : function(data) {
					if (data.flag == true) {
						window.location.reload();
					} else {
						showMsg(data.msg, "error", "3000");
					}
				}
			});
		}
	</script>
</body>
</html>